<template>
  <div class="Whereabouts">
    <div class="Obtain_employment">
      <h3>
        <div></div>就业前景概括
      </h3>
      <div class="employment">
        <div class="employment_left employments">
          <div class="img">
            <img src="@/assets/img/data.png" alt />
          </div>
          <div class="box">
            <h3>媒体</h3>
            <p>最多去向的行业</p>
          </div>
        </div>
        <div class="employment_right employments">
          <div class="img">
            <img src="@/assets/img/fangzi.png" alt />
          </div>
          <div class="box">
            <h3>深圳</h3>
            <p>最多去向的城市</p>
          </div>
        </div>
      </div>
    </div>
    <div class="Wherea">
      <h3>
        <div></div>行业去向
      </h3>
      <div class="list">
          <h4>每100个人毕业生，有<span>25</span>个从事<span>媒体</span>、<span>12</span>个从事<span>互联网</span></h4>
          <div class="list_data">
              <div>
                <div>媒体</div>
                <el-progress :percentage="50"></el-progress>
              </div>
              <div>
                <div>媒体</div>
                <el-progress :percentage="50"></el-progress>
              </div>
              <div>
                <div>媒体</div>
                <el-progress :percentage="50"></el-progress>
              </div>
              <div>
               <div>媒体</div>
               <el-progress :percentage="50"></el-progress>
              </div>
          </div>
      </div>
    </div>
     <div class="Wherea">
      <h3>
        <div></div>行业去地
      </h3>
      <div class="list">
        
          <div class="list_data">
              <div>
                <div>媒体</div><el-progress :percentage="50"></el-progress>
              </div>
              <div>
                <div>媒体</div><el-progress :percentage="50"></el-progress>
              </div>
              <div>
                <div>媒体</div><el-progress :percentage="50"></el-progress>
              </div>
              <div>
               <div>媒体</div><el-progress :percentage="50"></el-progress>
              </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.Whereabouts {
  padding: 46px 66px;
  background: #ffffff;
  border-radius: 10px;
  margin-bottom:100px;
  padding-bottom:140px;  
  .Obtain_employment {
    > h3 {
      display: flex;
      padding-bottom: 24px;
      font-size: 14px;
      div {
        background: #2e86ff;
        height: 16px;
        width: 6px;
        border-radius: 2px;
        margin-right: 14px;
        position: relative;
        top: -2px;
      }
    }
    .employment {
      display: flex;
      justify-content: space-between;
      .employments {
        padding: 44px;
        border-radius: 10px;
        background: #f0f0f0;
        width: 262px;
        display: flex;

        .img {
          margin-right: 20px;
          position: relative;
          img {
            position: absolute;
            width: 32px;
            height: 32px;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
          }
        }
        .box {
          h3 {
            color: #414141;
            line-height: 28px;
          }
          p {
            font-size: 14px;
            color: #aeaeae;
          }
        }
      }
      .employment_left {
        .img {
          width: 56px;
          height: 56px;
          background: #4387f6;
          border-radius: 50%;
        }
      }
      .employment_right {
        .img {
          width: 56px;
          height: 56px;
          background: #5fad62;
          border-radius: 50%;
        }
      }
    }
  }
  .Wherea {
    border-radius: 10px;

    margin-top: 48px;
    > h3 {
      display: flex;
      padding-bottom: 24px;
      font-size: 14px;
      div {
        background: #2e86ff;
        height: 16px;
        width: 6px;
        border-radius: 2px;
        margin-right: 14px;
        position: relative;
        top: -2px;
      }
    }
    .list{
         background: #f0f0f0;
         border-radius:10px;
         padding: 50px 66px; 
         h4{
             color: #a9a9a9;
             font-size: 12px;
             padding-bottom:34px ;
             span{
                 color: #4291fd;
             }
         }
         .list_data{
            display: flex;
            flex-wrap :wrap;
            > div{
                
                display: flex;
                width: 320px;
                margin-bottom:26px; 
                .el-progress{
                    margin-left:10px; 
                    width: 260px;
                }
                .el-progress-bar{
                    width: 264px;
                    margin-left:16px; 
                }
            }
         }

    }
  }
}
</style>>

